<div class="header-panel" *ngIf="fullview">
    {{'alarms.view-title' | translate}}
</div>
<div class="work-panel" [ngStyle]="{'top': fullview ? '40px' : '0px'}">
    <mat-table #table [dataSource]="dataSource" matSort>
        <ng-container matColumnDef="ontime">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{'alarms.view-ontime' | translate}} </mat-header-cell>
            <mat-cell *matCellDef="let element" [style.color]="element.color"> {{element.ontime | date: 'yyyy.MM.dd HH:mm:ss'}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="text">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{'alarms.view-text' | translate}} </mat-header-cell>
            <mat-cell *matCellDef="let element" [style.color]="element.color"> {{element.text}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="type">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{'alarms.view-type' | translate}} </mat-header-cell>
            <mat-cell *matCellDef="let element" [style.color]="element.color"> {{element.type}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="group">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{'alarms.view-group' | translate}} </mat-header-cell>
            <mat-cell *matCellDef="let element" [style.color]="element.color"> {{element.group}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="status">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{'alarms.view-status' | translate}} </mat-header-cell>
            <mat-cell *matCellDef="let element" [style.color]="element.color"> {{element.status}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="ack">
            <mat-header-cell *matHeaderCellDef>
                <div class="header-tools" *ngIf="!fullview">
                    <div (click)="$event.stopPropagation();onShowMode('expand')" *ngIf="currentShowMode === 'collapse'" style="cursor: pointer;">
                        <mat-icon>vertical_align_top</mat-icon>
                    </div>
                    <div (click)="$event.stopPropagation();onShowMode('collapse')" *ngIf="currentShowMode === 'expand'" style="cursor: pointer;">
                        <mat-icon>vertical_align_bottom</mat-icon>
                    </div>
                    <div (click)="onClose();$event.stopPropagation()" style="cursor: pointer;">
                        <mat-icon>clear</mat-icon>
                    </div>
                </div>
            </mat-header-cell>
            <mat-cell *matCellDef="let element" [style.color]="element.color">
                <button mat-icon-button (click)="onAckAlarm(element)" *ngIf="element.toack >= 0" [disabled]="element.toack == 0" class="remove">
                    <mat-icon>check_circle_outline</mat-icon>
                </button>
            </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let element; columns: displayedColumns;" class="my-mat-row" 
                        [style.background-color]="element.bkcolor"></mat-row>
    </mat-table>
</div>